<template>
	<view class="tmpl">
		<view class="status_bar"></view>
		<view class="profile-container">
			<view class="filter">
				<view class="filter-date">
					<view class="current-date" @click="filter_date()">
						{{ title_date }}
						<!-- <text>[1]</text> -->
					</view>
					<view class="filter-date-list" v-show="is_filter_date">
						<view class="filter-date-item" v-for="(date, index) in list_date" @click="change_data(date)">
							<text>{{ date.date }}</text>
						</view>
					</view>
				</view>
				<view class="filter-class">
					<view class="current-class"><input type="text" class="uni-input filter-search" @input="filter_search" /></view>
					<view class="search-list" v-if="is_filter_nickname">
						<view v-for="(item, index) in list_member">
							<text @click="Search(item)">{{ item.nick_name }}</text>
						</view>
					</view>
				</view>
			</view>

			<view class="detail" :style="{ backgroundImage: `url(${indexBackgroundImage})`, backgroundSize: '100%', backgroundRepeat: 'no-repeat' }">
				<view class="avatar"><image src="../../static/image/test/avatar.png" mode="widthFix" /></view>

				<view class="nickname">
					<text>{{ name }}</text>
					<view class="medal-list">
						<view class="medal-item"><image src="../../static/image/test/medal.png" mode="widthFix" /></view>
						<view class="medal-item"><image src="../../static/image/test/medal.png" mode="widthFix" /></view>
					</view>
				</view>

				<view class="total-list">
					<view class="total-item order-number">
						<view class="tital"><text>A班本月排名</text></view>
						<view class="number">
							<text>{{ class_order }}</text>
							<!-- <text>+2</text> -->
						</view>
					</view>

					<view class="total-item year-score">
						<view class="tital"><text>A班全年分数</text></view>
						<view class="number">
							<text>{{ class_score }}</text>
						</view>
					</view>

					<view class="total-item month-score">
						<view class="tital"><text>个人本月成绩</text></view>
						<view class="number">
							<text>{{ mouth_score }}</text>
						</view>
					</view>

					<view class="total-item month-order-number">
						<view class="tital"><text>个人本月排名</text></view>
						<view class="number">
							<text>{{ mouth_order }}</text>
							<!-- <text>-3</text> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="month-detail">
			<view class="month-title" @click="filter_date()">{{ title_date }}</view>
			<view class="month-title-c"><image src="../../static/image/kaohe-c-down.png" mode="widthFix" /></view>

			<view class="detail-list">
				<view v-for="(item, index) in list_summary">
					<view class="detail-item">
						<view class="detail-title" @click="toggle(index)">
							<text>{{ item.xmmc }}</text>
							<text>{{ item.zf }}</text>
						</view>

						<view class="detail-content-list" v-show="detail_content_list == index" v-for="_item in item.fl">
							<view class="detail-content-item">
								<text>{{ _item.fl }}</text>
								<text>[{{ _item.zf }}]</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="kaohe-list">
			<sl-filter :ref="'slFilter'" :menuList="menuList" @result="result"></sl-filter>
			<!-- <view class="kaohe-filter-list"> -->
			<!-- <view class="kaohe-filter-item">
					<text>其他班组</text>
					<image src="" mode="widthFix" />
				</view>
				<view class="kaohe-filter-item">
					<text>分类</text>
					<image src="" mode="widthFix" />
				</view> -->
			<!-- </view> -->
		</view>

		<view class="kaohe-detail">
			<view class="kaohe-detail-item" v-for="(item, index) in hidden">
				<view class="kaohe-detail-title">
					<view class="kaohe-detail-title-left">
						<text class="class_name">{{ item.dept_name }}</text>
						<text class="datetime">{{ item.nick_name }}</text>
					</view>
					<view class="kaohe-detail-title-right">
						<text>加减分：</text>
						<text>{{ item.fz }}</text>
					</view>
				</view>
				<view class="kaohe-detail-content">
					<text class="kaohe-date">{{ item.sj }}</text>
					<text>{{ item.ms }}</text>
				</view>
				<view class="kaohe-detail-content">{{ item.khnr }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import slFilter from '@/components/songlazy-sl-filter/sl-filter/sl-filter.vue';
import indexBackgroundImage from '../../static/image/kaohe-background.png';
export default {
	components: {
		slFilter
	},
	data() {
		return {
			indexBackgroundImage: indexBackgroundImage,
			search_mouse: '',
			name: '',
			deptId: '',
			khxmid: '',
			hidden: [],
			is_filter_date: false,
			is_filter_nickname:false,
			is_filter_class: false,
			list_summary: {},
			list_date: [],
			detail_content_list: 0,
			pageNum: 1,
			pageSize: 12,
			title_date: '',
			mouth_order: 0,
			mouth_score: 0,
			class_order: 0,
			class_score: 0,
			menuList: [
				{
					title: '其他班组',
					// 'detailTitle': '子标题1',
					// 'isMutiple': true,
					key: 'key_1',
					detailList: [
						{
							title: '全部',
							value: ''
						}
					]
				},
				{
					title: '分类',
					// 'detailTitle': '子标题2',
					key: 'key_2',
					isMutiple: false,
					detailList: [
						{
							title: '全部',
							value: ''
						}
					]
				}
			],
			query_user_name: '',
			query_nick_name: '',
			query_dept_id: '',
			list_member: []
		};
	},
	onLoad(query) {
		let _this = this;
		this.query_user_name = query.user_name;
		this.query_nick_name = query.nick_name;
		this.query_dept_id = query.dept_id;

		let myDate = new Date();
		let mouse = myDate.getMonth() + 1;
		let year = myDate.getFullYear();
		for (let i = 0; i < 12; i++) {
			let _mouse = mouse - i;
			if (_mouse <= 0) {
				year -= 1;
				_mouse = 12;
			}
			if (_mouse > 12) {
				_mouse = 1;
				year += 1;
			}
			if (_mouse < 10) {
				_mouse = '0' + _mouse;
			}
			let _date = {
				date: year + '年' + _mouse + '月',
				mouse: _mouse,
				search: year + '-' + _mouse
			};
			this.list_date.push(_date);
		}
		this.title_date = this.list_date[0].date;
		//班组列表
		this.$api.team({}).then(res => {
			for (let i = 0; i < res.data.data.length; i++) {
				let obj = res.data.data[i];
				let dept_name = obj['dept_name']; // 名称
				let dept_id = obj['dept_id']; //  ID
				let data = {
					title: dept_name,
					value: dept_id
				};
				_this.menuList[0].detailList.push(data);
			}
		});

		//考核项目
		this.$api.project({}).then(res => {
			for (let i = 0; i < res.data.data.length; i++) {
				let obj = res.data.data[i];
				let dept_name = obj['xmmc']; // 名称
				let dept_id = obj['xmid']; //  ID
				let data = {
					title: dept_name,
					value: dept_id
				};
				_this.menuList[1].detailList.push(data);
			}
		});
	},
	onShow() {
		let is_login = uni.getStorageSync('user_token') ? true : false;
		if (!is_login) {
			uni.navigateTo({
				url: '../profile/user_login'
			});
		}
		
		this.getListDetailData();

		let post_data = {
			deptId: this.query_dept_id,
			userName: this.query_user_name
		};
		// console.log(post_data)
		//  班组排名
		this.$api.getBzndzf(post_data).then(res => {
			// console.log('班组排名')
			// console.log(res)
			this.class_score = res.data.data[0].zf;
		});

		//个人月度排名，个人月度分
		this.$api.getGrpm(post_data).then(res => {
			// console.log("个人月度排名")
			// console.log(res)
			this.mouth_order = res.data.data[0].pm;
			this.mouth_score = res.data.data[0].zf;
			console.log(this.mouth_score)
		});

		//用户详情
		// this.$api.user(post_data).then((res) => {
		// 	console.log(res)
		// 	let _this = this
		// 	_this.name = res.data.data.nickName
		// })
		this.name = this.query_nick_name;
		//  班组排名
		this.$api.getBzpm(post_data).then(res => {
			// console.log(111111)
			// console.log(res)
			this.class_order = res.data.data[0].rank_no;
		});

		this.$api
			.assessment({
				khyf: this.search_mouse,
				userName: this.query_user_name
			})
			.then(res => {
				this.list_summary = res.data.data;
				// console.log(this.list_summary);
			});
	},
	methods: {
		change_data(date) {
			// console.log(date);
			this.search_mouse = date.search;
			this.$api
				.assessment({
					khyf: this.search_mouse
				})
				.then(res => {
					this.list_summary = res.data.data;
					// console.log(this.list_summary);
				});
			this.is_filter_date = false;
			this.title_date = date.date;
		},
		filter_search(data) {
			let val = data.detail.value;
			if (val.length > 0) {
				this.is_filter_nickname = true;
				let _this = this;
				this.$api
					.getUserList({
						nickName: val
					})
					.then(res => {
						_this.list_member = res.data.data;
					});
				console.log(_this.list_member);
			}else{
				this.is_filter_nickname = false;
			}
		},
		result(value) {
			this.deptId = value['key_1'];
			this.khxmid = value['key_2'];
			this.pageNum = 1;
			this.getListDetailData();
		},
		getListDetailData() {
			let _this = this;
			let data = {
				pageNum: _this.pageNum,
				pageSize: _this.pageSize,
				deptId: _this.deptId,
				khxmid: _this.khxmid
			};
			this.$api.points(data).then(res => {
				// console.log(res)
				_this.hidden = res.data.rows;

				// console.log(res);
			});
		},
		toggle(index) {
			this.detail_content_list = index;
		},
		filter_date() {
			if (this.is_filter_class) this.is_filter_class = !this.is_filter_class;
			this.is_filter_date = !this.is_filter_date;
		},
		filter_class() {
			if (this.is_filter_date) this.is_filter_date = !this.is_filter_date;
			this.is_filter_class = !this.is_filter_class;
		},
		Search(person){
			this.query_dept_id = person.dept_id;
			this.query_user_name = person.user_name;
			this.query_nick_name = person.nick_name
			let post_data = {
				deptId: this.query_dept_id,
				userName: this.query_user_name
			};
			console.log(post_data)
			this.is_filter_nickname = false
			//  班组排名
			this.$api.getBzndzf(post_data).then(res => {
				// console.log('班组排名')
				// console.log(res)
				this.class_score = res.data.data[0].zf;
			});
			
			//个人月度排名，个人月度分
			this.$api.getGrpm(post_data).then(res => {
				// console.log("个人月度排名")
				// console.log(res)
				this.mouth_order = res.data.data[0].pm;
				this.mouth_score = res.data.data[0].zf;
			});
			
			//用户详情
			// this.$api.user(post_data).then((res) => {
			// 	console.log(res)
			// 	let _this = this
			// 	_this.name = res.data.data.nickName
			// })
			this.name = person.nick_name;
			//  班组排名
			this.$api.getBzpm(post_data).then(res => {
				// console.log(111111)
				// console.log(res)
				this.class_order = res.data.data[0].pm;
			});
			
			this.$api
				.assessment({
					khyf: this.search_mouse,
					userName: this.query_user_name
				})
				.then(res => {
					this.list_summary = res.data.data;
					// console.log(this.list_summary);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.status_bar {
	margin-top: calc(var(--status-bar-height) + 50upx);
}

page {
	background-color: $background-color-2;
}

.filter-search {
	width: 60px;
	text-align: center;
}

.profile-container {
	background-image: url(https://www.huaxins.cn/app_bg.png);
	// background-image: url("~@/static/image/kaohe-background.png");
	background-size: 100%;
	background-position: top center;
	background-repeat: no-repeat;
	background-color: $background-color-1;

	.filter {
		position: absolute;
		@extend .flex-between;
		padding: 20upx;
		width: calc(100% - 40upx);

		.filter-date,
		.filter-class {
			background-color: $background-color-1;
			border: solid 1px #c1bcbc;
			display: block;
			position: absolute;
		}

		.filter-date {
			.current-date {
				padding: 10upx 20upx;
			}

			.filter-date-list {
				.filter-date-item {
					padding: 10upx 20upx;
					border-top: solid 1px #e5e5e5;
				}
			}
		}

		.filter-class {
			right: 20upx;

			.current-class {
				padding: 10upx 20upx;
			}

			.filter-class-list {
				z-index: 9;

				.filter-class-item {
					padding: 10upx 20upx;
					border-top: solid 1px #e5e5e5;
				}
			}
		}
	}

	.detail {
		.avatar {
			width: 30vw;
			margin: 0 auto;
			padding-top: 80px;

			image {
				width: 30vw;
				height: 30vw !important;
				@extend .image-radis;
				@extend .icon-image-size-full;
				border: solid 5px rgba(6, 0, 1, 0.2);
			}
		}

		.nickname {
			@extend .flex-between;
			justify-content: center;
			margin: 0 auto;
			margin-top: -5upx;

			text {
				font-size: $font-size-lg;
			}

			.medal-list {
				@extend .flex-between;
				margin-left: 10upx;

				.medal-item {
					margin-top: 14upx;

					image {
						@extend .icon-image-size;
					}
				}
			}
		}

		.total-list {
			@extend .flex-between;
			padding: 10upx;
			border-bottom: solid 1px #e5e5e5;

			.total-item {
				border-left: solid 1px #e5e5e5;
				padding: 3upx 10upx;
				margin: 10upx 0;
				padding-left: 15upx;

				.tital {
					font-size: $font-size-line;
				}

				.number {
					margin-top: 10upx;
					text-align: center;

					text {
						font-size: $uni-font-size-base;
						margin-left: 10upx;
						color: #8e8e8e;
					}

					text:first-child {
						font-size: $font-size-lg;
						margin-left: 0;
					}
				}

				&:first-child {
					// border-left: solid 1px #FFFFFF;
					border: none;
				}
			}

			.order-number .number text:first-child {
				color: #b23636;
			}

			.year-score .number text:first-child {
				color: #5cbcff;
			}

			.month-score .number text:first-child {
				color: #4c4c4c;
			}

			.month-order-number .number text:first-child {
				color: #20a719;
			}
		}
	}
}

.month-detail {
	@extend .container-1;
	background-color: $background-color-1;
	margin: 30upx 0;

	.month-title {
		color: #4c4c4c;
		font-size: $font-size-lg;
		text-align: center;
	}

	.month-title-c {
		width: 280upx;
		margin: 0 auto;
		margin-top: -10px;

		image {
			@extend .icon-image-size-full;
		}
	}

	.detail-list {
		margin-top: 20upx;

		.detail-item {
			padding: 0 15upx;

			.detail-title {
				@extend .flex-between;
				color: #b23636;
				font-size: $font-size-title;
				background-image: url(../../static/image/kaohe-p-c.png);
				background-repeat: repeat-x;
				background-position: left center;
				padding: 10upx 0;
				font-size: 35upx;

				text {
					padding: 0 8rpx;
					background-color: #fff;
				}

				text:first-child {
				}
			}

			.detail-content-list {
				color: #4c4c4c;
				font-size: $uni-font-size-sm;
				// height: 37upx;
				overflow-x: hidden;
				overflow-y: scroll;

				.detail-content-item {
					@extend .flex-between;
					background-image: url(../../static/image/kaohe-list-detail-c.png);
					background-repeat: repeat-x;
					background-position: left center;
					margin-left: 20upx;
					font-size: 30upx;
					height: 50upx;
					line-height: 50upx;
					overflow-y: hidden;

					text {
						padding: 0 0 0 20upx;
						background-color: #fff;
						line-height: 36upx;
						color: rgba(0, 0, 0, 0.6);
					}

					text:first-child {
						background-image: url(../../static/image/kaohe-list-c.png);
						background-position: 0 center;
						background-repeat: repeat-y;
						padding-left: 25upx;
					}
				}
			}
		}
	}

	.more {
		width: 50upx;
		height: 50upx;
		margin: 0 auto;
		margin-top: 10upx;

		image {
			@extend .icon-image-size-full;
		}
	}
}

.kaohe-list {
	background-color: $background-color-1;
	@extend .container-2;
	margin: 0;
	border-bottom: solid 1px rgba(0, 0, 0, 0.2);

	.kaohe-filter-list {
		@extend .flex-between;
	}
}

.kaohe-detail {
	min-height: 600px;
	padding-bottom: 20upx;
	background-color: #fff;

	.kaohe-detail-item {
		margin: 20upx 10upx 0 10upx;
		margin-top: 20upx;
		padding: 0 20upx;
		padding-top: 20upx;
		border-radius: 10upx;
		background-color: $background-color-1;
		box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
		// border: solid 1px rgba(0,0,0,.3);

		.kaohe-detail-title {
			@extend .flex-between;
			border-bottom: solid 1px rgba(0, 0, 0, 0.3);
			padding: 15upx 10upx;

			.class_name {
				font-size: $font-size-title;
			}

			.nickname {
				font-size: $font-size-title;
				margin-left: 8upx;
			}

			.datetime {
				font-size: 30upx;
				color: rgba(0, 0, 0, 0.6);
				margin-left: 15upx;
			}

			.kaohe-detail-title-right {
				text {
					font-size: $uni-font-size-base;
				}

				text:first-child {
				}
			}
		}

		.kaohe-detail-content {
			padding: 10upx;
			padding-bottom: 20upx;
		}
	}
}

.kaohe-date {
	float: right;
	font-size: 30rpx;
	// font-size: $font-size-sm;
	color: rgba(0, 0, 0, 0.6);
}
.search-list {
	max-height: 200px;
	overflow-y: scroll;
	
	text {
		border-top: solid 1px rgba(0, 0, 0, 0.1);
		display: block;
		padding: 20upx;
		text-align: center;
	}
}
</style>
